<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<script src="dist/vue.js"></script>
		<script src="dist/vue-resource.js"></script>
		<style type="text/css">
			  .gray{
			  	background: gray;
			  }
		</style>
	</head>

	<body>
		<div id="app">
			<input type="text" @keyup="get($event)" v-model="t1" @keydown.down="chengeDown()" @keyup.up.prevent="chengeUp()">
			<ul>
				<li v-for="(item,index) in myData" :class="{gray:index==now}">{{item}}</li>
			</ul>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				myData: [],
				t1:"",
				now:-1
			},
			methods: {

				get(ev) {
					if(ev.keyCode==38 || ev.keyCode==40)return
					if(ev.keyCode==13){
						window.open('https://www.baidu.com/s?wd='+this.t1)
						this.t1=""
					}
					this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{wd:this.t1},{jsonp:'cb'}).then(function(res) {
						this.myData = res.data.s;
						console.log(res.data.s)
					}, function() {
					});
				},
				chengeDown(){
					 this.now++
					 if(this.now==this.myData.length)this.now=-1
					 this.t1=this.myData[this.now]
				},
				chengeUp(){
					 this.now--
					 if(this.now==-2)this.now=this.myData.length-1
					 this.t1=this.myData[this.now]
				}

			}
		})
	</script>
</html>
